<template>
	<view>
		<view class="top-content">
			<view class="pic-wrap logo-wrap flex ccc">
				<image class="logo-img" :src="logo" mode="widthFix" />
			</view>
			<view class="circle-count-content flex rcc">
				<view class="circle-count-item flex ccc">
					<view class="count-num">{{message[0].num}}</view>
					<view class="count-title">{{message[0].name}}</view>
				</view>
				<view class="circle-count-item circle-count-item-cur flex ccc">
					<view class="count-num count-num-cur">{{message[1].num}}</view>
					<view class="count-title count-title-cur">{{message[1].name}}</view>
				</view>
				<view class="circle-count-item flex ccc">
					<view class="count-num">{{message[2].num}}</view>
					<view class="count-title">{{message[2].name}}</view>
				</view>
			</view>
			<view class="talent-count-content flex rcc">
				<view class="talent-count-item flex-1 rcc">
					<text class="talent-count-item-title">{{message[3].name}}</text>
					<text class="talent-count-item-num">{{message[3].num}}</text>
				</view>
				<view class="line-style vertical-line"></view>
				<view class="talent-count-item flex-1 rcc">
					<text class="talent-count-item-title">{{message[4].name}}</text>
					<text class="talent-count-item-num">{{message[4].num}}</text>
				</view>
				<view class="line-style vertical-line"></view>
				<view class="talent-count-item flex-1 rcc">
					<text class="talent-count-item-title">{{message[5].name}}</text>
					<text class="talent-count-item-num">{{message[5].num}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message: Array,
			logo: String,
		},
		data() {
			return {

			}
		},
		methods: {
			selectPhoto() {
				// uni.chooseImage({
				// 	count: 6, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album'], //从相册选择
				// 	success: function(res) {
				// 		console.log(JSON.stringify(res.tempFilePaths));
				// 	}
				// });
			}
		}
	}
</script>

<style scoped>
	.top-content {
		padding-top: 88rpx;
		height: 600rpx;
		background-image: url('~@/static/img/img_bg_work_bench.png');
		background-repeat: no-repeat;
		background-color: #FFFFFF;
		background-size: 100% 500rpx;
	}

	.top-content .logo-wrap {}

	.top-content .logo-wrap .logo-img {
		width: 220rpx;
	}

	.top-content .circle-count-content {
		margin: 30rpx 60rpx;
	}

	.top-content .circle-count-content .circle-count-item {
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
		border: 4rpx solid rgba(255, 255, 255, .6);
	}

	.top-content .circle-count-content .circle-count-item .count-num {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 700;
	}

	.top-content .circle-count-content .circle-count-item .count-title {
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 16rpx;
	}

	.top-content .circle-count-content .circle-count-item-cur {
		width: 180rpx;
		height: 180rpx;
		margin: 0 30rpx;
		border-radius: 180rpx;
		border: 6rpx solid #FFFFFF;
	}

	.top-content .circle-count-content .circle-count-item-cur .count-num-cur {
		font-size: 40rpx;
	}

	.top-content .circle-count-content .circle-count-item-cur .count-title-cur {}

	.top-content .talent-count-content {
		height: 160rpx;
		padding: 0 20rpx;
		margin: 30rpx 20rpx;
		background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
		box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
	}

	.top-content .talent-count-content .talent-count-item {}

	.top-content .talent-count-content .talent-count-item .talent-count-item-title {
		color: #666666;
		margin-right: 10rpx;
	}

	.top-content .talent-count-content .talent-count-item .talent-count-item-num {
		color: #333333;
		font-size: 30rpx;
		font-weight: 700;
	}

	.top-content .talent-count-content .vertical-line {
		height: 80rpx;
		margin: 0 20rpx;
	}
</style>
